<template>
	<view class="sort-header sort-position">
		<text>分类</text>
		<text>操作</text>
	</view>
	<view style="height: 90rpx;"></view>
	<view class="sort-header sort-table">
		<text class="occupy">休闲零食</text>
		<text class="sort-but">删除</text>
	</view>
	<!--弹窗-->
	<page-container :show="isShow" position="bottom" bindenter="onEnter" bindclickoverlay="onClickOverlay">
		<view class="space-view">
			<view class="modify-sub">
				<image src="/static/detail/guanbi.svg" mode="widthFix" @click="isShow=false"></image>
			</view>
			<view class="att-input">
				<input type="text" placeholder="请输入分类" placeholder-class="i-style" cursor-spacing="50" />
			</view>
			<view class="newly-added classif">提交</view>
		</view>
	</page-container>



	<!--底部按钮-->
	<view style="height: 300rpx;"></view>
	<view class="newly-added-view">
		<view class="newly-added" @click="isShow=true">新增分类</view>
	</view>
</template>

<script setup>
	import { onMounted,ref } from 'vue'

	onMounted(()=>{
		
	})

	//控制弹窗显示隐藏
	const isShow = ref(false)


	//弹窗事件
	function onEnter(e) {
		console.log(e)
	}

	 function onClickOverlay(e) {
		console.log(e)
	}
</script>

<style>
	.i-style {
		color: #cccccc;
	}

	.att-input {
		background-color: #f7f7f7;
		padding: 20rpx;
		border-radius: 7rpx;
	}

	.classif {
		margin: 60rpx 0 !important;
	}

	.modify-sub {
		padding-bottom: 60rpx !important;
	}
</style>